.filter {
    margin-bottom: 30px;
    .filter-row {
        @include clearfix;
    }
    .filter-column {
        @include clearfix;
        margin-bottom: 15px;
    }
    .filter-title {
        font-weight: bold;
    }
    .filter-content {
        margin-top: 10px;
        input[type="text"],
        input[type="datetime"],
        select {
            position: relative;
            display: inline-block;
            height: 33px;
            line-height: 33px;
            vertical-align: center;
            padding: 0 10px;
            border: 1px solid darken($brand-default,2%);
            border-radius: 2px;
            width: 220px;
            &:focus {
                outline: none;
            }

            &.in-sm {
                width: 120px;
            }
            &.in-md {
                width: 220px;
            }
            &.in-lg {
                width: 443px;
            }

            &.error{
              border-color: $brand-danger;
            }
        }
        .input-group {
            width: 260px;
            input[type="text"] {
                &:focus {
                    outline: none;
                }
            }
        }
    }
}
.filter-select {
    >a {
        cursor: pointer;
    }
}
.filter-select[type="date"] {
    >a {
        padding: 2px 6px;
        color: $text-color;
        cursor: pointer;
        border-radius: 2px;
        &.selected,
        &:hover {
            color: #fff;
            background-color: $brand-primary;
        }
    }
    input {
        cursor: pointer;
    }
}
.filter-select[type="tag"] {
    >a {
        display: inline;
        padding: 0.3em 0.6em;
        font-size: 75%;
        line-height: 1;
        color: $text-color;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25em;
        border: 1px solid darken($brand-default,10%);
        &.hover,
        &.selected {
            color: #fff;
        }
    }
}
.filter-content{
  .loading {
    position: relative;
    height: 40px;
    &:after {
        content: '';
        display: block;
        height: 32px;
        width: 32px;
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -16px;
        background: url("../image/loading.gif") no-repeat;
    }
}
}
